<template>
  <div>
   
    <my-head title="会员中心" :go="true" ri="兑换记录"></my-head> 
    <div class="swiper"> </div>
    <div class="sml">
<div class="left"><img src="@/assets/jifen_03.png" alt="">
可用积分
</div>
<div class="x"></div>
<div class="right"><img src="@/assets/yongpin_03.png" alt="">
积分大转盘
</div>
    </div>
    <div class="kuang"></div>
    
<div class="jinpintuijian">
<div class="header"><span>|</span>精品推荐<span>(6)</span></div>
<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/yongpin_07.png" alt="">
<p>苹果7 128G</p>
<p class="txt1">积分： <span class="txt2">309400</span> </p>
</div>
</router-link>

<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/yongpin_09.png" alt="">
<p>南极人磁疗枕</p>
<p class="txt1">积分： <span class="txt2">309400</span> </p>
</div>
</router-link>

<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/yongpin_13.png" alt="">
<p>抱枕</p>
<p class="txt1">积分： <span class="txt2">1750</span> </p>
</div>
</router-link>


<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/yongpin_14.png" alt="">
<p>松下吹风机</p>
<p class="txt1">积分： <span class="txt2">13950</span> </p>
</div>
</router-link>



<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/dff_03.png" alt="">
<p>音箱</p>
<p class="txt1">积分： <span class="txt2">9950</span> </p>
</div>
</router-link>



<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/dff_05.png" alt="">
<p>外交官拉杆箱</p>
<p class="txt1">积分： <span class="txt2">29950</span> </p>
</div>
</router-link>
</div>


  <div class="kuang"></div>
    <div class="tiantianduihuan">
<div class="header"><span>|</span>天天兑换<span>(6)</span></div>


<router-link to='/commodity'>
<div class="div2">
<img src="@/assets/F5B54ABB97DD77AD80250E8DE1C09665_03.png" alt="">
<p>代金券10元</p>
<p class="txt1">积分： <span class="txt2">500</span> </p>
</div>
</router-link>


<router-link to='/commodity'>
<div class="div2">
<img src="@/assets/F5B54ABB97DD77AD80250E8DE1C09665_05.png" alt="">
<p>代金券50元</p>
<p class="txt1">积分： <span class="txt2">2500</span> </p>
</div>
</router-link>

<router-link to='/commodity'>
<div class="div2">
<img src="@/assets/F5B54ABB97DD77AD80250E8DE1C09665_09.png" alt="">
<p>代金券100元</p>
<p class="txt1">积分： <span class="txt2">5000</span> </p>
</div>
</router-link>

<router-link to='/commodity'>
<div class="div2">
<img src="@/assets/F5B54ABB97DD77AD80250E8DE1C09665_10.png" alt="">
<p>加息劵</p>
<p class="txt1">积分： <span class="txt2">1000</span> </p>
</div>
</router-link>



<router-link to='/commodity'>
<div class="div2">
<img src="@/assets/F5B54ABB97DD77AD80250E8DE1C09665_13.png" alt="">
<p>爱奇艺会员三个月</p>
<p class="txt1">积分： <span class="txt2">2900</span> </p>
</div>
</router-link>



<router-link to='/commodity'>
<div class="div2">
<img src="@/assets/F5B54ABB97DD77AD80250E8DE1C09665_14.png" alt="">
<p>爱奇艺会员一个月</p>
<p class="txt1">积分： <span class="txt2">990</span> </p>
</div>
</router-link>

</div>

<div class="kuang"></div>
    <div class="jinpintuijian">
<div class="header"><span>|</span>精品商品<span>(6)</span></div>

<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/E5CD6131AE466EF669EF499B38D1FFEC_06.png" alt="">
<p>小米手环</p>
<p class="txt1">积分： <span class="txt2">7450</span> </p>
</div>

</router-link>



<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/E5CD6131AE466EF669EF499B38D1FFEC_03.png" alt="">
<p>膳魔师焖烧杯</p>
<p class="txt1">积分： <span class="txt2">26250</span> </p>
</div>

</router-link>



<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/E5CD6131AE466EF669EF499B38D1FFEC_14.png" alt="">
<p>美的电饭锅</p>
<p class="txt1">积分： <span class="txt2">13950</span> </p>
</div>
</router-link>


<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/yongpin_14.png" alt="">
<p>松下吹风机</p>
<p class="txt1">积分： <span class="txt2">13950</span> </p>
</div>
</router-link>


<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/E5CD6131AE466EF669EF499B38D1FFEC_22.png" alt="">
<p>手机壳</p>
<p class="txt1">积分： <span class="txt2">9900</span> </p>
</div>
</router-link>


<router-link to='/commodity'>
<div class="div1">
<img src="@/assets/E5CD6131AE466EF669EF499B38D1FFEC_19.png" alt="">
<p>kindle阅读器</p>
<p class="txt1">积分： <span class="txt2">50850</span> </p>
</div>
</router-link>

</div>
<div class="kuang"></div>


    <div class="wodeyuanwang">
<div class="header"><span>|</span>我的愿望</div>

<div class="q1"> <span>商品名称：</span><input type="text"></div>
<div class="q2">
  <div id="left">推荐理由：</div>
  <div id="right">
    <textarea name="" id="" cols="30" rows="3"></textarea>
  </div>
  </div>
  <div id="btn">
      <button>我要许愿</button>
  </div>
<div class="xuyuan">
  <p>许愿说明：</p>
  <p class="yaoqiu">1、诚邀您向我们推荐您想要的商品，并提供详细的推荐理由；</p>
    <p class="yaoqiu">2、小荷将采购上架许愿数量较高的商品，感谢您的支持！</p>
</div>

</div>
<div class="kuang"></div>

    <div class="huiyuanxuzhi">
<div class="header"><span>|</span>会员须知</div>

    <p class="yaoqiu">积分商城内的商品兑换有时间限制，如果用户不在规定
的时间内换购，到期后，则商品自动下架。所有商品会不
定期地更新，
商品可以是实物和虚拟物品，例如iPhone
7、kindle、美的电饭煲、Panasonic吹风机、膳魔师焖烧
杯套装、代金券和加息券等。
</p>
    <p class="yaoqiu">
      1、实物类兑换商品兑换成功后会在三个工作日内按系
统预留地址寄出，并通过平台短信方式通知快递单号，请
保持手机畅通: 虚拟类商品兑换成功后，系统会在三个工
作日内通知充值到账或者通过短信方式提供电子卡密。
</p>
    <p class="yaoqiu">
    2、如果有任何疑问，请联系在线客服，或拨打客服热
线咨询。

</p>
</div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
components:{
    myHead:Head
  },
}
</script>

<style  lang="less">


.huiyuanxuzhi{

  // flex-wrap:wrap;
  // display: flex;
  width: 100%;
  height: 2.74rem;
    font-size: 0.1rem;  
  // background: black;
  .header{
    height: 0.36rem;
    line-height: 0.36rem;
    color: #ce452d;
    font-size: 0.12rem;
    border-bottom: 0.01rem solid #eeeeee;
    span{
      margin-left: 0.1rem;
      margin-right: 0.1rem
    
  }
}
.yaoqiu{
          transform: translateX(0.15rem);
          margin-top: 0.1rem;
          width:3.23rem;
          }
}


.xuyuan{
   transform: translateX(0.15rem);
     margin-top: 0.2rem;

     .yaoqiu{
          transform: translateX(0.15rem);
          margin-top: 0.1rem;
          width:3rem
          }
}

.q1{
  font-size: 0.1rem;
  margin-top: 0.2rem;
transform: translateX(0.15rem);
  
}
#btn button{
  background: white;
  color: orangered;
  width: 1rem;
  height: 0.3rem;
  margin-top: 0.1rem;
  margin-left: 0.75rem;
  border-radius:0.05rem; 
  border: orangered 1px solid
}
.q1 input{
  border-radius: 0.04rem;
  outline: none
}
#left{
  float: left;
  font-size: 0.1rem;  
  margin-top: 10px;
  
}



.q2{
  align-items: center;
transform: translateX(0.15rem);
}
textarea{
  margin-top: 10px
}
.q2 textarea{
  border-radius: 0.06rem;
    outline: none
}

.div2{
  width: 1.87rem;
  height:1.84rem ;
  border: 0.01rem solid #f8f8f8;
  border-bottom: 0;
  text-align: center;
  float: left;
  img{
    width: 0.85rem;
    margin-top: 0.44rem;
        margin-bottom: 0.2rem
  }
  font-size: 0.12rem;
  .txt1{
    color: #a1a1a1;
    margin-top: 0.1rem
  }
   .txt2{
    color: #ffa160
  }
}


.tiantianduihuan{
  // flex-wrap:wrap;
  // display: flex;
  width: 100%;
  height: 5.84rem;
  // background: black;
  .header{
    height: 0.36rem;
    line-height: 0.36rem;
    color: #ce452d;
    font-size: 0.12rem;
    // border-bottom: 0.01rem solid #eeeeee;
    span{
      margin-left: 0.1rem;
      margin-right: 0.1rem
    }
  }
}



.wodeyuanwang{
  // flex-wrap:wrap;
  // display: flex;
  width: 100%;
  height: 2.74rem;
    font-size: 0.1rem;  
  // background: black;
  .header{
    height: 0.36rem;
    line-height: 0.36rem;
    color: #ce452d;
    font-size: 0.12rem;
    border-bottom: 0.01rem solid #eeeeee;
    span{
      margin-left: 0.1rem;
      margin-right: 0.1rem
    }
  }
}



.div1{
  width: 1.87rem;
  height:1.84rem ;
  border: 0.01rem solid #f8f8f8;
  border-bottom: 0;
  text-align: center;
  float: left;
  color: black;
  img{
    width: 0.85rem;
    margin-top: 0.31rem;
        margin-bottom: 0.1rem
  }
  font-size: 0.12rem;
  .txt1{
    color: #a1a1a1;
    margin-top: 0.1rem
  }
   .txt2{
    color: #ffa160
  }
}


.jinpintuijian{
  // flex-wrap:wrap;
  // display: flex;
  width: 100%;
  height: 5.84rem;
  // background: black;
  .header{
    height: 0.36rem;
    line-height: 0.36rem;
    color: #ce452d;
    font-size: 0.12rem;
    // border-bottom: 0.01rem solid #eeeeee;
    span{
      margin-left: 0.1rem;
      margin-right: 0.1rem
    }
  }
}
.kuang{
  width: 100%;
  height: 0.09rem;    
  background: #eeeeee                                          
}

.x{
  height: 0.2rem;
  border: 0.009rem solid #ccc;
  margin-top: 0.15rem
}

.swiper{
  width: 100%;
  height: 1.5rem;
  background: pink
}
.sml{
  width: 100%;
  height: 0.5rem;
  // background: red;
  display: flex;

.left{
flex: 1;
text-align: center;
line-height: 0.5rem;
// border-right: 0.01rem solid #ccc;
img{
  width: 0.2rem;
  
}
}
.right{
flex: 1;
text-align: center;
line-height: 0.5rem;
img{
  width: 0.2rem;

}
}
}
</style>
